<template>
  <div>
    <div class="theme">
      <!-- 图片 -->
      <img class="themeimg" :src="img" />
    </div>
    <div class="activity">
      <p class="distance">{{ describe }}</p>
    </div>
    <div>
      <!-- 瀑布流 -->
      <waterfall
        v-if="flowGoodsList"
        :col="2"
        :data="flowGoodsList"
        :width="itemWidth"
        :gutterWidth="gutterWidth"
        :loadDistance="10"
      >
        <template>
          <div class="goodslist" v-for="(item, index) in flowGoodsList" :key="index">
            <router-link :to="{ name: 'goods', params: { id: item.id } }">
              <img :src="item.img" />
              <p class="goodslist-title">{{ item.title }}</p>
              <div class="goodslist-tags-out">
                <van-tag
                  v-for="(item2, index) in item.tags"
                  type="primary"
                  :key="index"
                  class="goodslist-tags"
                >
                  {{ item2 }}
                </van-tag>
              </div>
              <p class="goodslist-price">{{ item.price }}</p>
              <p class="goodslist-subtitle">{{ item.description }}</p>
            </router-link>
          </div>
        </template>
      </waterfall>
    </div>
  </div>
</template>

<script>
export default {
  name: "Themes",
  data() {
    return {
      flowGoodsList: [], //
      describe: "", //
      img: "", //
    };
  },
  created() {
    if (this.$route.query.name) {
      this.getThemeDetail();
    }
  },
  methods: {
    getThemeDetail() {
      this.$http
        .get(`http://localhost:8080/theme/detail/${this.$route.query.name}`)
        .then((result) => {
          this.img = result.data.entranceImg;
          this.describe = result.data.description;
          this.flowGoodsList = result.data.spuList;

          this.flowGoodsList.forEach((item) => {
            if (item.tags) {
              item.tags = item.tags.split("$");
            }
          });
        });
    },
  },
  computed: {
    itemWidth() {
      return 340 * 0.5 * (document.documentElement.clientWidth / 375);
    },
    gutterWidth() {
      return 36 * 0.5 * (document.documentElement.clientWidth / 375);
    },
  },
};
</script>

<style scoped>
.theme {
  height: 180px;
}
.themeimg {
  max-height: 100%;
  width: 100%;
}
.activity {
  text-align: left;
  padding: 10px 0 20px 10px;
  font-size: 17px;
}
.distance {
  padding: 10px 0 0 0;
}
.goodslist {
  background: white;
  text-align: left;
  float: left;
  width: 100%;
  margin: 8px 8px;
  padding-bottom: 10px;
  box-shadow: 0 0 6px rgb(173, 185, 196);
  border-radius: 8px 8px 8px 8px;
}
.goodslist img {
  border-radius: 8px 8px 0 0;
  width: 100%;
}
.goodslist-subtitle {
  word-wrap: break-word;
  padding: 5px 10px 0 11px;
  color: rgb(95, 126, 151);
  font-size: 12px;
}
.goodslist-title {
  font-size: 15px;
  color: black;
  padding: 5px 10px 0 11px;
}
.goodslist-tags {
  background: rgb(111, 212, 187);
  font-size: 5px;
  margin-left: 4px;
  color: rgb(219, 255, 230);
}
.goodslist-tags-out {
  margin-left: 6px;
}
.goodslist-price {
  padding-top: 5px;
  color: rgb(62, 62, 131);
  padding-left: 10px;
}
</style>